<template>
	<div class="md-category-class">
		<md-advanced-table :data="table.rows" v-bind="tableAttrs">
			<template #buttons>
				<v-row>
					<v-col :sm="3" class="pt-4">
						<v-text-field v-model="query.name" label="名称" outlined clearable dense hint="请输入名称模糊搜索"/>
					</v-col>
					<v-col sm="3" class="pt-5">
						<v-btn class="mr-1" @click="onSearch">搜索</v-btn>
						<v-btn color="primary" @click="$refs.dialog.add()">新增</v-btn>
					</v-col>
				</v-row>
			</template>
			<template #icon="{row}">
				<v-avatar>
					<img :src="row.icon | imageSrc"/>
				</v-avatar>
			</template>
			<template #isEnabled="{row}">
				<v-switch v-model="row.isEnabled" @change="onSwitchChange(row)"></v-switch>
			</template>
			<template #isRoleAccess="{row}">
				<v-switch v-model="row.isRoleAccess" @change="onSwitchChange(row)"></v-switch>
			</template>
			<template #action="{row}">
				<v-btn small color="primary" class="mr-1" @click="edit(row)">编辑</v-btn>
				<v-btn small color="error" class="mr-1" @click="onDelete(row)">删除</v-btn>
			</template>
		</md-advanced-table>
		<category-class-dialog ref="dialog" @success="getTableData(true)"/>
	</div>
</template>

<script>
	import MdTableMixins from '@/common/mixins/MdTableMixins';
	import CategoryApi from '@/common/api/CategoryApi';
	import MdAdvancedTable from '@/components/widget/MdAdvancedTable';
	import CategoryClassDialog from '@/views/admin/category/modules/CategoryClassDialog';

	export default {
		components: {CategoryClassDialog, MdAdvancedTable},
		mixins: [MdTableMixins],
		data() {
			return {
				tableAttrs: this.$utils.tableAttrs({
					toolbarConfig: {},
					columns: [
						{field: '#', type: 'seq', width: 40, align: 'center'},
						{field: 'icon', title: '图标', align: 'center', slots: {default: 'icon'}, width: 70},
						{field: 'name', title: '名称', align: 'center'},
						{field: 'description', title: '描述', align: 'center'},
						{field: 'isEnabled', title: '是否启用', align: 'center', width: 80, slots: {default: 'isEnabled'}},
						{field: 'isRoleAccess', title: '是否角色控制', align: 'center', width: 110, slots: {default: 'isRoleAccess'}},
						{field: 'rolesNames', title: '访问角色', align: 'center'},
						{field: 'sortId', title: '排序', align: 'center', width: 80},
						{field: 'action', title: '操作', align: 'center', width: 200, slots: {default: 'action'}}
					]
				}),
				loadFunc: () => {
					return CategoryApi.classApi.list(this.query);
				}
			}
		},
		computed: {},
		created() {
		},
		methods: {
			onSwitchChange(row) {
				this.$nextTick(() => {
					this.update(row)
				})
			},
			update(row) {
				this.loading = true;
				CategoryApi.classApi.update(row.id, row).then(res => {
					this.$utils.responseHandler(res).catch(() => {
						this.getTableData();
					})
				}).catch(() => {
					this.getTableData();
				}).finally(() => this.loading = false)
			},

			edit(row) {
				this.$refs.dialog.edit(row);
			},
			onDelete(row) {
				this.$utils.onConfirm(`是否删除"${row.name}?`).then(() => {
					CategoryApi.classApi.delete(row.id).then(res => {
						this.$utils.responseHandler(res, true, true).then(this.onSearch);
					})
				})
			}
		},
		filters: {},
		watch: {}
	}
</script>

<style scoped lang="scss">

</style>